<template>
  <div class="message">
    <!--头部-->
    <van-nav-bar title="消息" />
    <!--导航跳转-->
    <van-grid :column-num="3">
      <van-grid-item
        icon="https://alipic.lanhuapp.com/ps45e613a54717c27d-9fb9-46dd-9cb9-9a3d560775c3"
        text="回答和评论"
        icon-size="40px"
      />
      <van-grid-item
        icon="https://alipic.lanhuapp.com/ps0b89d9af317d4001-9528-484e-b90e-2be489016aa0"
        text="点赞和收藏"
        icon-size="40px"
      />
      <van-grid-item
        icon="https://alipic.lanhuapp.com/ps052d61597ad77752-fcec-4ea2-9976-2652a8092d3e"
        text="粉丝"
        icon-size="40px"
      />
    </van-grid>

    <!--信息列表-->
    <div class="msg-list">
      <div class="System">
        <van-icon
          size="45px"
          name="https://alipic.lanhuapp.com/psf9850cec3ecf14db-0513-4367-accc-14d9c23e933c"
        />
        <div class="s-right">
          <p class="s-title">系统消息<span>07-06</span></p>
          <p class="s-bot">你家狗狗会在门口等你回家吗？</p>
        </div>
      </div>
      <div class="butler">
        <van-icon
          size="45px"
          name="https://alipic.lanhuapp.com/ps67c9a52df0998943-c7c8-4a86-8892-0ec891c74996"
        />
        <p>宠明小管家</p>
      </div>
      <div class="edit">
        <van-icon
          size="45px"
          name="https://alipic.lanhuapp.com/ps6c673567554c2cb3-ecad-48ab-a208-c654ced11c49"
        />
        <p>宠明编辑部</p>
      </div>
      <div class="mall">
        <van-icon
          size="45px"
          name="https://alipic.lanhuapp.com/ps5b7745ef0e8b1109-66b5-4db1-8d3f-531b1be55dc1"
        />
        <p>商城客服</p>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  setup() {
    const onClickLeft = () => Toast("返回");
    const onClickRight = () => Toast("按钮");

    return {
      onClickLeft,
      onClickRight,
      list: ["发现 . 0", "提问 . 0", "回答 . 0"],
    };
  },
};
</script>
<style lang="less">
.message {
  .van-nav-bar {
    .van-nav-bar__title {
      font-size: 17px;
      font-weight: 900;
    }
  }
  .msg-list {
    width: 100%;
    height: 70px;
    .System {
      border-bottom: 1px solid #ccc;
      background-color: #fff;
      display: flex;
      height: 100%;
      .van-badge__wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20%;
        height: 100%;
      }
      .s-right {
        width: 80%;
        height: 100%;
        padding: 0 10px;
        .s-title {
          font-size: 15px;
          font-weight: 900;
          line-height: 30px;
          margin-bottom: 10px;
          span {
            float: right;
            color: #999999;
            font-size: 12px;
          }
        }
        .s-bot {
          font-size: 12px;
          color: #999999;
          line-height: 30px;
        }
      }
    }
    .butler,
    .mall,
    .edit {
      background-color: #fff;
      border-bottom: 1px solid #ccc;
      width: 100%;
      height: 70px;
      display: flex;
      .van-badge__wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20%;
        height: 100%;
      }
      p {
        line-height: 70px;
        padding: 10px;
        font-size: 15px;
        font-weight: 900;
      }
    }
  }
}
</style>
